<template>
  <div class="hotwordserver">
    <!-- 表格  @row-click="handleEdit"-->
    <el-table
      :data="serverlist"
      style="width: 100%"
      highlight-current-row
      :row-class-name="tableRowClassName"
      v-hasPermi="['base:goodsLabel:edit']"
    >
      <el-table-column width="55">
        <template v-slot="{row}">
          <i
            class="el-icon-remove"
            @click="delectserver(row.id)"
            v-hasPermi="['work:goodsLabel:remove']"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="type" width="180" label="类型">
        <template v-slot="{row}">
          <div class="selsect-box">
            <p>
              {{row.typename ? row.typename : '--'}}
              <i class="el-icon-caret-bottom"></i>
            </p>
            <!-- //scope.row.type=="4"||scope.row.type=="5"?0: -->
            <el-select
              v-model="row.typelistid"
              :value-key="row.id"
              placeholder="--"
              @change="(item) => {
                      edittype(item,row);
                    }"
            >
              <el-option
                v-for="(item,index) in typelist"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <!-- 服务名称 -->
      <el-table-column prop="typename" label="服务名称">
        <!-- v-slot="{$index}" -->
        <template v-slot="{row,index}">
          <div class="selsect-box">
            <el-cascader
              :ref="`cascader_${index}`"
              separator="-"
              v-model="row.typeId"
              :options="row.servernamelist"
              :props="optionProps"
              clearable
              placeholder="请选择"
              @change="(item) => {
                      edittypename(item, row,index);
                    }"
            ></el-cascader>
            <i class="el-icon-caret-bottom severicon"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageing.total"
      ></el-pagination>
    </div>-->
    <!-- <div class="elcascaderbix">
      <el-cascader-panel
        :show-all-levels="false"
        :options="allserver"
        :props="optionProps"
        clearable
        :placeholder="`新增服务（${serverlength}/5）`"
        @change="selectchange"
      ></el-cascader-panel>
      <div class="btnbox">
        <el-button type="primary" round>确定</el-button>
        <el-button round>取消</el-button>
      </div>
    </div>-->
    <div class="bottomBtn">
      <el-cascader
        ref="addcascader"
        :key="refreshcascader"
        :show-all-levels="false"
        :options="allserver"
        :props="optionProps"
        :placeholder="`新增服务（${serverlength}/5）`"
        clearable
        @change="selectchange"
        @visible-change="visiblechange($event)"
        v-hasPermi="['base:goodsLabel:add']"
      ></el-cascader>
      <!-- <p>新增服务（{{serverlength}}/5）</p> -->
    </div>
  </div>
</template>

<script>
import {
  getConsultTypeListApi,
  getprojectTypeListApi
} from "@/wss/newApi_3-24/BK/aricereview/index.js";
import { getContractTypeListApi } from "@/wss/newApi_3-24/base/contractType";
import {
  getgoodsLabelGetInfoApi,
  getgoodsLabelListApi,
  getgoodsLabeladdApi,
  getgoodsLabelEditApi,
  getgoodsLabelRemoveApi
} from "@/wss/newApi_3-24/officewebsite/goodsLabel.js";
const arr = [null, "", undefined];

export default {
  name: "hotwordserver",
  data() {
    return {
      maxaddnum: 5, //新增服务最大数
      refreshcascader: 0, ////清除cascader级联选择器选中值
      labelId: "", //热词ID
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      serverlist: [], //关联服务列表
      serverlength: 0, //关联服务列表长度
      consultlist: [], //咨询列表
      projectlist: [], //项目列表
      contractlist: [], //合同列表
      toollist: [
        //工具列表

        {
          id: "20",
          name: "合同智审"
        },
        {
          id: "21",
          name: "模拟诉讼"
        },
        {
          id: "22",
          name: "智慧预算"
        },
        {
          id: "23",
          name: "合同文控"
        }
      ],
      selecttypeId: "all", //选择的类型id
      //类型列表
      typelist: [
        {
          id: "4",
          name: "合同"
        },
        {
          id: "5",
          name: "咨询"
        },
        {
          id: "6",
          name: "项目"
        },
        {
          id: "0",
          name: "工具"
        }
      ],
      // 添加服务参数
      addObj: {
        //热词ID
        labelId: 1,
        // es类型
        type: "",
        //类型ID
        typeId: ""
      },
      buttonVissible: true, //显示添加按钮
      // 联选配置项
      optionProps: {
        // multiple: true,
        value: "id",
        label: "name",
        children: "children"
      },
      //添加服务联选列表
      allserver: [
        {
          id: "4",
          name: "合同",
          children: []
        },
        {
          id: "5",
          name: "咨询",
          children: []
        },
        {
          id: "6",
          name: "项目",
          children: []
        },
        {
          id: "0",
          name: "工具",
          children: [
            {
              id: "20",
              name: "合同智审"
            },
            {
              id: "21",
              name: "模拟诉讼"
            },
            {
              id: "22",
              name: "智慧预算"
            },
            {
              id: "23",
              name: "合同文控"
            }
          ]
        }
      ],
      //服务名称三级联选列表
      servernamelist: [
        {
          id: "20",
          name: "合同智审"
        },
        {
          id: "21",
          name: "模拟诉讼"
        },
        {
          id: "22",
          name: "智慧预算"
        },
        {
          id: "23",
          name: "合同文控"
        }
      ],
      arrPType: [] //服务一维数组
    };
  },
  created() {},
  async mounted() {
    // Promise.all([
    //   this.getconsultTypelist(),
    //   this.getprojectTypelist(),
    //   this.getcontractTypelist()
    // ]).then(res => {
    //   this.getHotwordServerlist();
    // });
  },
  methods: {
    getHotwordServer(id) {
      console.log("关联服务", id);
      this.labelId = id;
      Promise.all([this.getHotwordServerlist()]).then(res => {
        this.getconsultTypelist(),
          this.getprojectTypelist(),
          this.getcontractTypelist();
      });
    },
    // 获取关联服务列表
    async getHotwordServerlist() {
      const { pageNum, pageSize } = this.pageing;
      let { rows, code, total } = await getgoodsLabelListApi({
        labelId: this.labelId,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize
      });
      //console.log(rows, "1");
      if (code != 200) return;
      // this.treelist();
      rows.forEach(item => {
        const matched = this.typelist.find(({ id }) => id === item.type);
        // let sarray = [];
        // sarray.push(item.typeId);
        //console.log("级联数据回显");
        // let l = this.arrPType.find(k => {
        //   return item.typeId == k.id;
        // });
        // console.log(l);
        // const servernamearr = this.treeFindPath(
        //   this.servernamelist,
        //   node => node.id == item.typeId
        // );
        //console.log(servernamearr);
        // Object.assign(item, { servername: servernamearr.join("-") });
        //console.log(this.defaultData(sarray));
        Object.assign(item, { servernamelist: [] });
        if (matched) {
          Object.assign(item, { typename: matched.name });
          Object.assign(item, { typelistid: matched.id });
        } else {
          Object.assign(item, { typename: "工具" });
          Object.assign(item, { typelistid: "0" });
        }
        item.type == 20 ||
        (item.type == 21) | (item.type == 22) | (item.type == 23)
          ? (item.servernamelist = this.toollist)
          : "";
      });
      this.serverlist = rows;
      this.serverlength = rows.length;
      //this.serverlist = [...this.serverlist, ...rows];
      //this.pageing.total = total;
    },

    //获取合同列表
    async getcontractTypelist() {
      let { code, rows } = await getContractTypeListApi();
      if (code != 200) return;
      rows = this.getTreeData(rows); //el-Cascader三级联选过滤无数据的的选项
      this.contractlist = rows;
      let list = rows;
      let listS = JSON.stringify(list);
      listS.replace(/name/g, "label");
      listS.replace(/id/g, "value");
      list = JSON.parse(listS);
      this.serverlist.forEach(item => {
        item.type == 4 ? (item.servernamelist = list) : "";
      });
      list.forEach(item => {
        this.allserver[0].children.push(item);
      });
      // console.log(this.allserver, "合同");
      // console.log(this.serverlist, "0");
    },
    //获取咨询列表
    async getconsultTypelist() {
      let { code, rows } = await getConsultTypeListApi();
      if (code != 200) return;
      // console.log(rows);
      rows = this.getTreeData(rows); //el-Cascader三级联选过滤无数据的的选项
      this.consultlist = rows;
      let list = rows;
      let listS = JSON.stringify(list);
      listS.replace(/name/g, "label");
      listS.replace(/id/g, "value");
      list = JSON.parse(listS);
      this.serverlist.forEach(item => {
        item.type == 5 ? (item.servernamelist = list) : "";
      });
      list.forEach(item => {
        this.allserver[1].children.push(item);
      });
    },
    //获取项目列表
    async getprojectTypelist() {
      let { code, rows } = await getprojectTypeListApi();
      //  console.log(rows);
      if (code != 200) return;
      rows = this.getTreeData(rows); //el-Cascader三级联选过滤无数据的的选项
      this.projectlist = rows;
      let list = rows;
      let listS = JSON.stringify(list);
      listS.replace(/name/g, "label");
      listS.replace(/id/g, "value");
      list = JSON.parse(listS);
      this.serverlist.forEach(item => {
        item.type == 6 ? (item.servernamelist = list) : "";
      });
      list.forEach(item => {
        this.allserver[2].children.push(item);
      });
      // console.log(this.allserver, "项目");
      // console.log(this.serverlist, "2");
    },
    //el-Cascader三级联选过滤无数据的的选项
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i].children);
        if (data[i].hasOwnProperty("children")) {
          if (data[i].children.length <= 0) {
            // 最后一级没有数据将children变成undefined
            data[i].children = undefined;
          } else {
            // children不为空时继续调用该方法
            this.getTreeData(data[i].children);
          }
        }
      }
      return data;
    },
    // 修改类型，相应服务名称呼应
    async edittype(item, row) {
      //console.log(item, row);
      // const typelistid = row.typelistid;
      //this.selecttypeId = item;
      // let arr = this.typelist;
      // let index = arr.findIndex(arr => arr.id == item);
      var defaulttarid = "";
      // console.log(index);
      if (item == "4") {
        //console.log("444");
        // console.log(this.contractlist);
        // this.serverlist[row.index];
        this.serverlist[row.index].servernamelist = this.contractlist;
        defaulttarid = "1543891796273168384";
        // console.log(this.serverlist[row.index].servernamelist);
        // this.$set(this.serverlist[index], "typeId", "1544585952749481984");
      } else if (item == "5") {
        /// console.log("555");
        //  console.log(this.serverlist[row.index].servernamelist);
        this.serverlist[row.index].servernamelist = this.consultlist;
        // console.log(this.serverlist[row.index].servernamelist);
        defaulttarid = "1544862728142778368";
        // this.$set(this.serverlist[index], "typeId", "1544862728142778368");
      } else if (item == "6") {
        this.serverlist[row.index].servernamelist = this.projectlist;
        defaulttarid = "1544511617087107072";
        // this.$set(this.serverlist[index], "typeId", "1544511617087107072");
      } else if (item == "0") {
        this.serverlist[row.index].servernamelist = this.toollist;
        defaulttarid = "20";
        // this.$set(this.serverlist[index], "typeId", "20");
      }
      // this.serverlist[row.index].typeId = defaulttarid;
      const matched = this.typelist.find(({ id }) => id === item);
      //console.log(matched);
      this.$set(row, "typename", matched.name);
    },
    //修改服务名称，提交服务修改
    async edittypename(item, row, index) {
      console.log(item);
      console.log(row);
      let id = row.id;
      let typename = row.typelistid;
      let typeid = item[item.length - 1];
      if (typename == "0") {
        typename = item[item.length - 1];
      }
      console.log(id, typename, typeid);
      this.editserver(id, typename, typeid);
      //this.editserver(item, row)
      // const nodesInfo = this.$refs["cascader_" + index].getCheckedNodes();
      // console.log(nodesInfo);
    },
    //给table复制index
    tableRowClassName({ row, rowIndex }) {
      //console.log(row, rowIndex);
      row.index = rowIndex;
    },
    // handleEdit(row, column, event) {
    //   //console.log(row, row.index);
    // },
    //添加服务三级联选
    selectchange(event) {
      console.log(event, "aaaaaaaaaaa");
      this.refreshcascader++; //清除cascader级联选择器选中值
      if (event.length <= 0) return;
      let typename = event[0];
      let typeid = event[event.length - 1];
      if (typename == "0") {
        typename = event[event.length - 1];
      }
      console.log(typename, typeid);
      // let arr = this.allserver.filter(i => {
      //   return type == i.id;
      // });
      this.addserver(typename, typeid);
    },
    //下拉框出现/隐藏时触发
    visiblechange(event) {
      //console.log("下拉框触发", event);
      if (this.serverlist.length >= this.maxaddnum) {
        this.$message({
          message: "已达到最大新增数量！",
          type: "warning"
        });
        this.$nextTick(() => {
          this.$refs.addcascader.dropDownVisible = false;
        });
      }
    },
    //添加服务
    async addserver(typename, typeid) {
      console.log(typename, typeid);
      let { rows, code, total, msg } = await getgoodsLabeladdApi({
        labelId: this.labelId,
        type: typename,
        typeId: typeid
      });
      //console.log(rows);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });
      this.getHotwordServer(this.labelId);
    },
    //修改服务
    async editserver(id, typename, typeid) {
      let { rows, code, total, msg } = await getgoodsLabelEditApi({
        id: id,
        labelId: this.labelId,
        type: typename,
        typeId: typeid
      });
      console.log(rows);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });
      this.getHotwordServer(this.labelId);
    },
    // 删除服务
    async delectserver(id) {
      // console.log(id);
      let { code, msg } = await getgoodsLabelRemoveApi(id);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });

      this.getHotwordServer(this.labelId);
    },
    showButton() {
      this.buttonVissible = false;
    }
    // visibleHandler(val, index) {
    //   const nodesInfo = this.$refs["cascader_" + index].getCheckedNodes(); // 获取当前级联选择器已选择的选项
    //   // console.log(nodesInfo);
    //   // if (val) {
    //   //   nodesInfo.forEach(item => {
    //   //     this.$set(item.data, "disabled", false);
    //   //     if (item.parent) {
    //   //       this.$set(item.parent.data, "disabled", false);
    //   //     }
    //   //   });
    //   // } else {
    //   //   nodesInfo.forEach(item => {
    //   //     this.$set(item.data, "disabled", true);
    //   //   });
    //   // }
    // },
    // expandchange(item, row, index) {
    //   console.log("expandchangeexpandchange");
    //   console.log(item, row, index);
    // },
    // treelist() {
    //   // 获取全部一级类型
    //   let oneType = [];
    //   this.servernamelist.forEach(item => {
    //     oneType.push(item);
    //   });
    //   // 获取全部二级类型
    //   let secondType = [];
    //   this.servernamelist.forEach(item => {
    //     if (item.children) {
    //       item.children.forEach(k => {
    //         secondType.push(k);
    //       });
    //     }
    //   });
    //   let threeType = []; //全部三级类型
    //   secondType.forEach(item => {
    //     if (item.children) {
    //       item.children.forEach(i => {
    //         threeType.push(i);
    //       });
    //     }
    //   });
    //   let arrPType = [...oneType, ...secondType, ...threeType];
    //   this.arrPType = arrPType;
    //   console.log(arrPType);
    // },
    // treeFindPath(tree, func, path = []) {
    //   if (!tree) return [];
    //   for (const data of tree) {
    //     path.push(data.name);
    //     if (func(data)) return path;
    //     if (data.children) {
    //       const findChildren = this.treeFindPath(data.children, func, path);
    //       // console.log(findChildren);
    //       if (findChildren.length) return findChildren;
    //     }
    //     path.pop();
    //     //return path;
    //   }
    //   return [];
    //   // return [];
    // },
    // defaultData(result) {
    //   var data = [...this.allserver];
    //   //console.log(result);
    //   // console.log(data);
    //   var addArray = [];
    //   for (var i = 0; i < data.length; i++) {
    //     if (result.length === 0) {
    //       return addArray;
    //     }
    //     let itemAdd = [];
    //     if (result.indexOf(data[i].id) < 0) {
    //       itemAdd.push(data[i].id);
    //       if (data[i].children) {
    //         cartwheel(itemAdd, data[i].children);
    //       } else {
    //         itemAdd = [];
    //         continue;
    //       }
    //     } else {
    //       addArray.push(...data[i].id);
    //       result.splice(result.indexOf(data[i].id), 1);
    //     }
    //   }

    //   function cartwheel(itemAdd, data) {
    //     for (var i = 0; i < data.length; i++) {
    //       if (itemAdd.indexOf(data[i].id) > -1 || result.length === 0) {
    //         return;
    //       }
    //       itemAdd.push(data[i].id);
    //       if (result.indexOf(data[i].id) < 0) {
    //         if (data[i].children) {
    //           cartwheel(itemAdd, data[i].children);
    //         } else {
    //           itemAdd.splice(itemAdd.length - 1, 1);
    //           continue;
    //         }
    //       } else {
    //         var copy = JSON.stringify(itemAdd);
    //         addArray.push(JSON.parse(copy));
    //         itemAdd.splice(itemAdd.length - 1, 1);
    //         result.splice(result.indexOf(data[i].id), 1);
    //         continue;
    //       }
    //     }
    //     itemAdd.splice(itemAdd.length - 1, 1);
    //   }

    //   return addArray;
    // },
  }
};
</script>

<style scoped lang="scss">
// ::v-deep .main-div{
//   height: calc(100% - 54px);
// }
.hotwordserver-org {
  height: 100%;
}
::v-deep .hotwordserver-main .el-card {
  position: relative;
}
::v-deep .hotwordserver-main .el-card__body {
  height: 100%;
}
::v-deep .hotwordserver-main .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .hotwordserver-main .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
::v-deep .el-cascader .el-input .el-input__inner {
  border: none;
  background: transparent;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner::-webkit-input-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner:-moz-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner::-moz-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner:-ms-input-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep .el-table__body-wrapper .el-cascader .el-icon-caret-bottom {
  position: absolute;
  right: 0;
}
::v-deep .el-table__body-wrapper .el-cascader,
.el-table__body-wrapper .el-cascader .el-input {
  width: 100%;
}
.elcascaderbix {
  position: absolute;
  bottom: 60px;
  z-index: 999;
  right: 30px;
  margin: auto;
  background: #fff;
}
.elcascaderbix .btnbox {
  text-align: right;
  margin: 10px;
}
::v-deep .elcascaderbix .btnbox .el-button--primary {
  background: rgb(248, 122, 35);
  border-color: rgb(248, 122, 35);
}
::v-deep .el-cascader-menu__wrap {
  height: 158px;
}
.severicon.el-icon-caret-bottom {
  margin-left: -150px;
}
/* 选择器 */
.mateCascader {
  /* height: 6%; */
  margin-bottom: 20px;
}
::v-deep .mateCascader .el-select {
  padding: 0 10px;
  border-radius: 8px;
  width: 320px;
  background-color: #f5f6f8;
}
::v-deep .mateCascader .el-select .el-input__inner {
  border: 0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret {
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret:before {
  content: "\E78F";
}
.el-select-dropdown .el-select-dropdown__item.selected {
  color: #f87a23;
}
//分页
.pagination {
  text-align: center;
  margin-bottom: 70px;
}
/* 内容区 */
.hotwordserver-main {
  height: 100%;
}
.hotwordserver-main .el-row {
  height: 100%;
}
::v-deep .hotwordserver-main .el-form .el-input--medium {
  width: 100px !important;
}
::v-deep .hotwordserver-main .el-form .el-button--default {
  display: none;
}
/* 表格样式 */
.el-table {
  margin-bottom: 80px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

.selsect-box {
  position: relative;
}
.selsect-box > p {
  position: relative;
}
.selsect-box .el-select {
  position: absolute;
  top: 0;
  z-index: 9;
  opacity: 0;
}

/* 添加材料 */
.bottomBtn {
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 9px 10px;
  width: 100%;
  border-top: 1px solid #ecedf0;
  z-index: 9;
  .inputBox {
    // flex: 1;
    display: flex;
  }
  .buttonBox {
    ::v-deep .el-button--primary {
      background-color: #f87a23;
      border-color: #f87a23;
      color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
    ::v-deep .el-button--default {
      background-color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #606e84;
    }

    /* // ::v-deep .el-button + .el-button {
    //   margin-left: 0px;
    // } */
  }
}

::v-deep .el-table .el-dropdown-link {
  color: unset;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
  margin-right: 10px;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  background: transparent;
  border: none;
  color: #606e84;
  text-align: center;
}
::v-deep .el-cascader .el-input .el-icon-arrow-down {
  display: none;
}
::v-deep .bottomBtn .el-input .el-input__inner::-webkit-input-placeholder {
  color: #606e84;
  font-size: 16px;
}
::v-deep .bottomBtn .el-input .el-input__inner:-moz-placeholder {
  color: #606e84;
  font-size: 16px;
}
::v-deep .bottomBtn .el-input .el-input__inner::-moz-placeholder {
  color: #606e84;
  font-size: 16px;
}
::v-deep .bottomBtn .el-input .el-input__inner:-ms-input-placeholder {
  color: #606e84;
  font-size: 16px;
}

.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  z-index: 2;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
/* 按钮组 */
::v-deep .top .right {
  flex: none;
}
.el-button-group {
  display: flex;
}
.el-button-group .el-button {
  background-color: #f0f2f5;
  color: #2e3f5e;
  border: 1px solid #f0f2f5;
  padding: 10px 10px;
}
.el-button-group .el-button.isActive {
  background-color: #fff;
  color: #f87a23;
  font-weight: bold;
}
.el-button-group i {
  display: inline-block;
  font-size: 14px;
  background-color: #f0f2f5;
  padding: 10px 10px;
  cursor: pointer;
}
/* 按钮组 end*/
::v-deep .el-table__header .el-checkbox__inner {
  display: none;
}
// ::v-deep .el-card__body{

// }
</style>